<template>
    <div class="file">
        <file-pdf-outlined class="file-icon" v-if="fileType == 'pdf'" />
        <file-word-outlined class="file-icon" v-if="fileType == 'doc'" />
        <file-word-outlined class="file-icon" v-if="fileType == 'docx'" />
        <file-excel-outlined class="file-icon" v-if="fileType == 'xls'" />
        <file-excel-outlined class="file-icon" v-if="fileType == 'xlsx'" />
        <file-ppt-outlined class="file-icon" v-if="fileType == 'ppt'" />
        <file-ppt-outlined class="file-icon" v-if="fileType == 'pptx'" />
        <file-text-outlined class="file-icon" v-if="fileType == 'txt'" />
        <file-image-outlined class="file-icon" v-if="fileType == 'jpg'" />
        <file-image-outlined class="file-icon" v-if="fileType == 'png'" />
        <file-image-outlined class="file-icon" v-if="fileType == 'gif'" />
        <file-image-outlined class="file-icon" v-if="fileType == 'jpeg'" />
        <file-outlined class="file-icon" v-if="fileType == 'other'" />
        <p>{{ fileName }}</p>
    </div>
</template>

<script setup>
import {
    FilePdfOutlined,
    FileWordOutlined,
    FileExcelOutlined,
    FilePptOutlined,
    FileTextOutlined,
    FileImageOutlined,
    FileOutlined,
} from "@ant-design/icons-vue";
import { ref } from 'vue';
const props = defineProps({
    fileName: String,
});

const getFileType = (fileName) => {
    const fType = fileName.split(".")[1];
    switch (fType) {
        case "pdf":
        case "doc":
        case "docx":
        case "xls":
        case "xlsx":
        case "ppt":
        case "pptx":
        case "txt":
        case "jpg":
        case "png":
        case "gif":
        case "jpeg":
            return fType;
        default:
            return "other";
    }
}
let fileType = ref(getFileType(props.fileName));
</script>

<style scoped>
.file {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 128px;
    height: 128px;
    cursor: pointer;
    border-radius: 5px;
    margin:16px;
    padding: 8px 0;
    box-shadow: 0 2px 8px rgb(0 0 0 / 12%);
    transition: 0.3s;
}

.file:hover {
    box-shadow: 0 2px 16px rgb(0 0 0 / 20%);
}

.file>p {
    width: 100%;
    height: 24px;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    user-select: none;
    text-align: center;
}

.file-icon {
    width: 64px;
    height: 64px;
    font-size: 48px;
}
</style>